<script lang="ts" setup>
import collapse from "./collapse.vue";
// Store
import { useCanvasStoreHook } from "@/stores/modules/canvas"; // 画布

const useCanvasStore = useCanvasStoreHook();

const tags = computed(() => useCanvasStore.getStatistics());
const tagEdges = computed(() => useCanvasStore.getEdgesByNum());
</script>

<template>
  <div>
    <collapse title="对象分布">
      <div class="count">
        <span v-for="(item, index) in tags" :key="index" class="my-[8px]">
          {{ item.name }}（{{ item.children.length }}）
        </span>
      </div>
    </collapse>
    <collapse title="关系分布">
      <div class="count">
        <span v-for="(item, index) in tagEdges" :key="index" class="my-[8px]">
          {{ item.name }}（{{ item.children.length }}）
        </span>
      </div>
    </collapse>
  </div>
</template>

<style lang="scss" scoped>
.count {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #222222;
  line-height: 22px;
}
</style>
